<template>
  <div style="padding-top:1.5rem;text-align: left">
    <TopNav title="PublishPage.rwjl" show_left="true"></TopNav>
    <div style="padding:0.3rem;font-size:0.4rem;">
      <div v-if="loading" style="text-align: center;">
        <van-loading />
      </div>
      <div v-else-if="data.length>0">
        <table class="table">
          <thead>
          <tr>
            <th>{{ $t('PublishPage.mc') }}</th>
            <th>{{ $t('PublishPage.jg') }}</th>
            <th>{{ $t('PublishPage.zs') }}</th>
            <th>{{ $t('PublishPage.sj') }}</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in data">
            <td>
              <div>{{item.title}}</div>
              <div>{{item.desc}}</div>
            </td>
            <td>{{item.single_reward}}</td>
            <td>
              <div v-if="item.status==0">{{ $t('PublishPage.sh') }}</div>
              <div v-else-if="item.status==1">{{ $t('PublishPage.cg') }}</div>
              <div v-else>
                {{ $t('PublishPage.sb') }}<div>{{item.reply}}</div>
              </div>
            </td>
            <td>{{item.when}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div v-else style="text-align: center;">
        <EmptyBox text="PublishPage.zwjl"/>
      </div>
    </div>
    <div @click="handleClickShowPublish" class="plus-box">
      <img src="../../static/img/plus.png" alt="">
    </div>
    <nut-popup position="bottom" :overlay="false" closeable close-icon="cross" :style="{ height:'100%' }" v-model="showPublish" close-icon-position="top-right">
      <div style="padding:1.3rem 0.3rem">
        <van-row style="margin-bottom:0.5rem;">
          <van-col span="8"><p style="padding-left:0.4rem;">{{ $t('PublishPage.lb') }}</p></van-col>
          <van-col span="16">
            <van-radio-group v-model="args.type" direction="horizontal">
              <!--            <van-radio name="0">{{ $t('PublishPage.wx') }}</van-radio>-->
              <van-radio name="1">{{ $t('PublishPage.dy') }}</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
        <van-field v-model="args.name" :label="this.$t('PublishPage.rwmc')" ></van-field>
        <van-field v-model="args.desc" :label="this.$t('PublishPage.rwyq')" />
        <van-field v-model="args.url" :label="this.$t('PublishPage.rwlj')" />
        <van-cell style="color:orange;" :title="this.$t('PublishPage.fbnrzhyebnsyy')"/>
        <van-button @click="handleClickPublish" block :loading="loading" plain type="primary" style="margin-top:0.5rem;">{{ $t('PublishPage.tj') }}</van-button>
      </div>
    </nut-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import { RadioGroup, Radio, Row, Col, Field,Button,Loading } from 'vant';
import 'vant/lib/radio/style';
import 'vant/lib/radio-group/style';
import 'vant/lib/row/style';
import 'vant/lib/col/style';
import 'vant/lib/field/style';
import 'vant/lib/button/style';
import 'vant/lib/loading/style';


Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Row);
Vue.use(Col);
Vue.use(Field);
Vue.use(Button);
Vue.use(Loading);
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'HelpPage',
    components: {
      EmptyBox,
      TopNav,
    },
    data () {
    return {
      loading: false,
      showPublish: false,
      data:[],
      curr_html:'',
      showHelpDetail:false,
      args:{
          type:'1',
          name:'',
          desc:'',
          url:''
      }
    }
  },
    methods:{
      handleClickShowPublish(){
        this.showPublish = true
      },
      getData(){
          this.loading = true
          this.$axios.get(this.$api_url.task_list_me).then((res)=>{
              console.log(res);
              if(res.data){
                  this.data = res.data;
              }
          }).catch((err)=>{
              this.$toast.fail(err.message);
          }).then(()=>{
              this.loading = false;
          })
      },
      handleClickViewHelpContent(html){
          this.curr_html = html;
          this.showHelpDetail = true;
      },
        handleClickPublish(){
          if(this.args.name == "" ||
          this.args.desc == ""){
              this.$toast.warn(this.$t('PublishPage.qtxwzxx'));
              return;
          }
          this.loading =  true;
          let loading = this.$toast.loading(this.$t("ProfilePage.zztj")+'...');
            this.$axios.post(this.$api_url.task_add,this.$qs.stringify(this.args)).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                this.loading = false;
                loading.hide();
            })
        }
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .review-box{
    padding:1rem;
    text-align: left
  }
  .review-box img{
    max-width: 100%;
  }
  .plus-box{
    position: absolute;
    right: 0.5rem;
    bottom:0.5rem;
  }
  .table{
    width: 100%;
    font-size: 0.4rem;
    border-collapse: collapse;
  }
  .table td, .table th {
    border: thin solid #ccc;
    padding: 0.15rem;
  }
</style>
